<#include "/common/layout.ftl">

<@layout >
    <div class="frame-content">
        <ul id="treeDemo" class="ztree"></ul>
        <button>11</button>
        <table id="table"></table>
    </div>
</@layout>

<@style>
    <link rel="stylesheet" href="${base }static/extends/ztree/css/ztreestyle/ztree.css" type="text/css">
</@style>
<@script>
<script type="text/javascript" src="${base }static/extends/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${base }static/extends/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
    var ztree = null;

   ztree = $.fn.zTree.init($("#treeDemo"), {
       check: {
           enable: true
       },
       data: {
           simpleData: {
               enable: true,
               pIdKey:'parentId'
           }
       },
       callback: {
           onCheck: function () {
               var nodes = ztree.getChangeCheckedNodes();

               console.log(nodes)
           }
       }
   }, [
       { id:1, parentId:0, name:"随意勾选 1", open:true},
       { id:11, parentId:1, name:"随意勾选 1-1", open:true},
       { id:111, parentId:11, name:"随意勾选 1-1-1"},
       { id:112, parentId:11, name:"随意勾选 1-1-2"},
       { id:12, parentId:1, name:"随意勾选 1-2", open:true},
       { id:121, parentId:12, name:"随意勾选 1-2-1"},
       { id:122, parentId:12, name:"随意勾选 1-2-2"},
       { id:2, parentId:0, name:"随意勾选 2", checked:true, open:true},
       { id:21, parentId:2, name:"随意勾选 2-1"},
       { id:22, parentId:2, name:"随意勾选 2-2", open:true},
       { id:221, parentId:22, name:"随意勾选 2-2-1", checked:true},
       { id:222, parentId:22, name:"随意勾选 2-2-2"},
       { id:23, parentId:2, name:"随意勾选 2-3"}
   ]);

    HsUtils.initTreeTable("#table", "id", "parentId", "id", [
        {
            field: 'id',
            title: '#'
        },
        {
            field: 'title',
            title: '菜单名称'
        },
        {
            field: 'type',
            title: '类型',
            formatter: function (value, row, index) {
                if (value === 0) {
                    return '目录';
                }
                if (value === 1) {
                    return '菜单';
                }
                if (value === 2) {
                    return '按钮';
                }
                return '-';
            }
        },
        {
            field: 'url',
            title: '地址'
        },
        {
            field: 'icon',
            title: '图标',
            align: 'center',
            formatter: function (value) {
                return '<i class="mdi {0} " style="font-size: 22px;" ></i>'.format(value);
            }
        },
        {
            field: 'isDisabled',
            title: '状态',
            align: 'center',
            width: '100',
            formatter: function (value, row, index) {
                if (value === 1) {
                    return '<span class="label label-danger">禁止</span>';
                } else {
                    return '<span class="label label-success">正常</span>';
                }
            }
        },
        {
            field: 'code',
            title: '权限值'
        },
        {
            field: 'createTime',
            width: '160',
            title: '创建时间'
        },
        {
            field: 'editTime',
            width: '160',
            title: '修改时间'
        },
        {
            field: 'operate',
            title: '操作',
            width: '180',
            align: 'center',
            formatter: function (value, row, index) {
                var MENU_FORM_ID = 3;
                return [
                    HsUtils.buildTableActionBtn('添加', Const.btnType.PRIMARY, '/admin/auth/add?id=' + row.id, row.title, MENU_FORM_ID),
                    HsUtils.buildTableActionBtn('修改', Const.btnType.WARNING, '/admin/auth/edit?id=' + row.id, row.title, MENU_FORM_ID),
                    HsUtils.buildTableActionBtn('删除', Const.btnType.DANGER, '/admin/auth/del?id=' + row.id, row.title)
                ].join('');

            }
        },
    ], JSON.parse('${menus }'));
</script>
</@script>
